<template>
  <div class="abnormal">
    <div class="bottom-border"></div>

    <div class="fromed">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="110px">
        <el-row :gutter="15">
          <el-col :span="3">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="检查区域:" prop="time">
                  <el-select
                    v-model="formData.cities"
                    placeholder="请选择检查区域"
                    clearable
                    :style="{width: '100%'}"
                  >
                    <el-option
                      v-for="(item, index) in qvxl"
                      :key="index"
                      :label="item.ROOMNAME"
                      :value="item.ROOMID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="3">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="间隔单元:" prop>
                  <el-select
                    v-model="formData.substation"
                    placeholder="请选择间隔单元"
                    clearable
                    :style="{width: '100%'}"
                  >
                    <el-option
                      v-for="(item, index) in jgdy"
                      :key="index"
                      :label="item.JGMC"
                      :value="item.JGID"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="3">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="巡检点位:" prop="source">
                  <el-input
                    v-model="formData.sideShot"
                    placeholder
                    type="text"
                    clearable
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="3">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="巡检结果:" prop="source">
                  <el-input
                    v-model="formData.system"
                    placeholder
                    type="text"
                    clearable
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="3">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="识别结论:" prop="source">
                  <el-select
                    v-model="formData.xsjg"
                    placeholder="请选择结果确认情况"
                    clearable
                    :style="{width: '100%'}"
                  >
                    <el-option
                      v-for="(item, index) in sbjgOptions"
                      :key="index"
                      :label="item.interval"
                      :value="item.id"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="确认情况:" label-width="125px" prop="source">
                  <el-select
                    v-model="formData.jgqrqk"
                    placeholder="请选择结果确认情况"
                    clearable
                    :style="{width: '100%'}"
                  >
                    <el-option
                      v-for="(item, index) in systemOptions"
                      :key="index"
                      :label="item.interval"
                      :value="item.id"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :offset="1" :span="4">
            <el-row :gutter="0">
              <el-col :span="12">
                <el-button type="primary" @click="init">查询</el-button>
              </el-col>
              <el-col :span="12">
                <el-button type="primary" :disabled="disabled" @click="alarm">批量核实</el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="tableed bigTableStyle">
      <el-table
        :data="tableData"
        height="100%"
        border
        :row-class-name="tableRowClassName"
        style="width: 100%;height:100%;"
      >
        <el-table-column prop="myIndex" label="序号" width="80"></el-table-column>
        <el-table-column prop="ROOMNAME" label="巡检区域"></el-table-column>
        <el-table-column prop="JGMC" label="间隔单元"  width="300"></el-table-column>
        <el-table-column prop="XJDW" width="420" :show-overflow-tooltip="true" label="巡检点位"></el-table-column>
        <el-table-column prop="XSJG" label="巡检结果">
          <template slot-scope="scope">
            <div class="xsjg" @click="xsjgClick(scope.row)">{{scope.row.SBJG }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="SBJG" label="识别结论" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div>{{scope.row.XSJG | format}} </div>
          </template>
        </el-table-column>
        <el-table-column prop="RGXZ" label="人工修正"></el-table-column>
        <el-table-column label="采集信息">
          <template slot-scope="scope">
            <div v-if="scope.row.XSJG=='2'">-</div>
            <div v-else @click="imgClick(scope.row)">
              <el-image
                style="width: 20px; height: 20px"
                :src="url"
                :preview-src-list="scope.row.srcList"
              ></el-image>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="paged elPaginationStyle">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages.page"
        :page-sizes="[10, 20, 30]"
        :page-size="pages.pageSize"
        layout="total,prev, pager, next,sizes, jumper"
        :total="pages.totalSize"
      ></el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";

@Component({
  filters: {
    format(value: any) {
      switch (value) {
        case '0':
          value = "异常";
          break;
        case '1':
          value = "正常";
          break;
        case '2':
          value = "漏检";
          break;
        case '3':
          value = "无法识别";
          break;
        case '4':
          value = "人工识别";
          break;
        case '5':
          value = "预警";
          break;
        default:
          value = "";
          break;
      }
      return value;
    },
  },
})
export default class abnormal extends Vue {
   @Prop({ default: () => "" })
  JHLX;
  @Prop() qvxl: any;
  @Prop() jgdy: any;
  @Prop() Manipulation: any;
  //控制批量审核 状态
  disabled = true;
  //搜索框from表单数据
  formData = {
    cities: "",
    substation: "",
    sideShot: "",
    system: "",
    xsjg: "",
    jgqrqk: "",
    strtimeedntime: "",
  };
  rules = {
    time: [],
    source: [],
    name: [],
  };
  citiesOptions = [
    {
      interval: "山东省国网公司",
      id: 1,
    },
  ];
  sideShotOptions = [
    {
      interval: "xxx测点",
      id: 1,
    },
  ];
  sbjgOptions = [
    {
      interval: "全部",
      id: "",
    },
    {
      interval: "告警",
      id: '0',
    },
    {
      interval: "正常",
      id: '1',
    },
    {
      interval: "漏检",
      id: '2',
    },
    {
      interval: "无法识别",
      id: '3',
    },
    {
      interval: "人工识别",
      id: '4',
    },
    {
      interval: "预警",
      id: '5',
    },
  ];
  systemOptions = [
    {
      interval: "全部",
      id: "",
    },
    {
      interval: "未核实",
      id: "0",
    },
    {
      interval: "已核实",
      id: "1",
    },
    {
      interval: "误报",
      id: "2",
    },
    {
      interval: "漏报",
      id: '3',
    },
    {
      interval: "图数不一致",
      id: '4',
    },
    {
      interval: "无法识别",
      id: '5',
    },
    {
      interval: "缺陷",
      id: "6",
    },
  ];
  systemOptions2 = [
    {
      interval: "未核实",
      id: "0",
    },
    {
      interval: "已核实",
      id: "1",
    },
    {
      interval: "误报",
      id: "2",
    },
    {
      interval: "漏报",
      id: "3",
    },
    {
      interval: "图数不一致",
      id: "4",
    },
    {
      interval: "无法识别",
      id: "5",
    },
    {
      interval: "缺陷",
      id: "6",
    },
  ];
  refreshOptions = [
    {
      interval: "其它类型",
      id: 1,
    },
  ];
  pickerOptions = {
    shortcuts: [
      {
        text: "最近一周",
        onClick(picker: any) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          picker.$emit("pick", [start, end]);
        },
      },
      {
        text: "最近一个月",
        onClick(picker: any) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          picker.$emit("pick", [start, end]);
        },
      },
      {
        text: "最近三个月",
        onClick(picker: any) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
          picker.$emit("pick", [start, end]);
        },
      },
    ],
  };
  $refs!: {
    elForm: any;
  };

  resetForm() {
    this.$refs.elForm.resetFields();
  }
  alarm() {
    this.$confirm(
      "是否将该变电站下所有未核实的异常巡检测点［人工核实］设置为‘已核实’？",
      "确认",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }
    )
      .then(() => {
        var form: any = {};
        form.type = "yc";
        form.jhid = this.Manipulation.ID || "";
        form.xslx = this.Manipulation.XSLX || "";
        form.jhlx = "";
        // form._ = this.Manipulation.BDZID;
        (this as any).$services
          .onlyTypeConfirm({ data: form })
          .then((result: any) => {
            // console.log(result);
            if (result.code == 200) {
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.init();
            } else {
              this.$message({
                type: "warning",
                message: "操作失败",
              });
            }
          })
          .catch((err: object) => {
            console.log(err);
          });
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: "已取消",
        });
      });
  }
  //table表格相关事件数据
  tableData = [
    // {
    //   date: "1",
    //   name: "xxxxxxxxx",
    //   address: "xxxxxxxxxxx",
    //   srcList: [
    //     "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
    //     "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
    //   ],
    //   SBJG:1,
    //   XSJG:1
    // },
  ];
  tableRowClassName({ row, rowIndex }: any): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }

  url = require("../../../../../assets/img/JointInspection/pic.png");
  srcList = [
    "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
    "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
  ];

  //分页数据事件相关
  pages = {
    pageSize: 20,
    page: 1,
    totalSize: 0,
  };
  //   分页
  handleSizeChange(val: any) {
    this.pages.pageSize = val;
    // console.log(`每页 ${val} 条`);
    this.init();
  }
  // 分页事件
  handleCurrentChange(val: any) {
    this.pages.page = val;
    this.init();
  }
  //巡视结果 点击
  xsjgClick(val) {
    this.$emit("closeHandel", val, true);
  }
  //点击 图标
  imgClick(val) {
    this.$emit("imgHandel", val, true);
  }
  init() {
    var form: any = {};
    form.jhid = this.Manipulation.ID;
    form.xslx = this.Manipulation.XSLX;
    form.roomid=this.formData.cities||'';
    form.jgdy=this.formData.substation||'';
    form.xjdw=this.formData.sideShot||'';
     form.xjjg=this.formData.system||'';
    form.xsjg=this.formData.xsjg||'';
    form.sfqr=this.formData.jgqrqk||'';

 

    form.page = this.pages.page;
    form.rows = this.pages.pageSize;
    form.jhlx= this.JHLX ? this.JHLX : "zjh";
    // console.log(form);
    (this as any).$services
      .xsbgQueryAllPage({ data: form })
      .then((result: any) => {
        // console.log(result);
        this.pages.totalSize = result.data.total;
        let page = this.pages.page;
      let size = this.pages.pageSize;
        result.data.rows.forEach((element,i) => {
          element.XSJG=element.XSJG +''
          element.myIndex = (page - 1) * size + i + 1;
        });
        this.tableData = result.data.rows;
        // console.log(this.tableData);
        if (this.tableData.length >= 1) {
          this.disabled = false;
          this.$emit('showtrue',true)
        }
        // console.log(this.pages.totalSize);
        this.$emit("xjxxhzTotal", this.pages.totalSize);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  mounted() {
    // console.log(this.Manipulation);
    this.init();
      }
}
</script>

<style lang="scss" scoped>
.abnormal {
  .bottom-border {
    margin: 0 0 0.1rem;
  }
  .abnormal-btn {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .tableed {
    height: 300px;
  }
  .paged {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .xsjg {
    // color: #08c;
    cursor: pointer;
  }
  .xsjg:hover {
    color: blue;
  }
}
</style>
<style lang="scss">
.abnormal {
  .el-form-item {
    margin-bottom: 0.1rem;
  }
}
</style>

